<template>
  <div class="preview-image">
    <el-dialog
      title=""
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <div class="content">
        <div :class="!editConfig.isLookImg ? 'header-box1' : 'header-box'">
          <!-- <div v-if="editConfig.isLookImg"></div> -->
          <div class="label-box" v-if="editConfig.isLookImg">
            <div class="common-title" @click="selTabClick(1)" :class="isBigImage ? 'commonColor' : 'selColor'">
              大图
            </div>
            <div
              style="pointer-events: none"
              class="common-title"
              @click="selTabClick(2)"
              :class="isBigImage ? 'selColor' : 'commonColor'"
            >
              视频
            </div>
          </div>
          <div class="label-box" v-if="!editConfig.isLookImg">
            <div class="common-title" @click="selTabClick(1)" :class="isBigImage ? 'commonColor' : 'selColor'">
              加入底库
            </div>
          </div>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div v-if="editConfig.isLookImg">
          <div v-if="isBigImage" class="bigImage-box">
            <div class="top-view">
              <div class="snap-left-box">
                <div class="label-common">全景图</div>
                <div class="img-box">
                  <img :src="panoramaImgUrl" fit="cover" class="s-l-img" />
                  <!-- <el-image
                    :src="panoramaImgUrl"
                    fit="cover"
                    placeholder="加载中..."
                  ></el-image> -->
                </div>
                <div class="value-common">{{ snapTime }}</div>
                <div v-for="(item, index) in deviceList" :key="index" class="device-info">
                  {{ item.name }}{{ item.value }}
                </div>
              </div>
              <div class="snap-right-box">
                <div class="label-common">
                  <div>抓拍图</div>
                  <div class="close-box">
                    <!-- <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image> -->
                  </div>
                </div>
                <div class="snap-image-box" v-if="isImgComparison">
                  <!-- <el-image :src="leftImgUrl" class="img-left"></el-image> -->
                  <img :src="leftImgUrl" class="img-left" />
                  <!-- <el-image :src="rightImgUrl" class="img-right"></el-image> -->
                  <img :src="rightImgUrl" class="img-right" />
                  <div class="radio-view">{{ targetScore }}%</div>
                </div>
                <div class="snap-image-box" v-else>
                  <!-- <el-image :src="noComparisonImg" class="img-left"></el-image> -->
                  <img :src="noComparisonImg" class="img-left" />
                </div>
                <div v-for="(item, index) in personInfoList" :key="index" class="person-info">
                  <template v-if="item.value"> {{ item.name }}:{{ item.value }} </template>
                </div>
              </div>
            </div>
            <!-- <div class="bottom-view">
              <div class="other-box">
                <span>{{ taskName }}</span>
                <span style="margin-left: 10px; margin-right: 10px">{{ alarmLevel }}</span>
                <span class="other-info">{{ otherLabels }}</span>
                
              </div>
              <div class="tag-box">
                <div v-for="(item, index) in tagList" :key="index" class="tag-info">
                  {{ item }}
                </div>
              </div>
            </div> -->
          </div>
          <div v-else class="video-box">
            <div class="left-video">
              <div v-if="videoPath.length === 0" class="no-video">暂无视频</div>
              <VideoView ref="videoView" v-else :path="videoPath" />
            </div>
            <div class="right-video">
              <div class="label-common">抓拍图</div>
              <div class="snap-image-box">
                <!-- <el-image :src="rightImgUrl" class="img-left"></el-image> -->
                <img :src="rightImgUrl" class="img-left" />
                <!-- <el-image :src="rightImgUrl" class="img-right"></el-image> -->
              </div>
            </div>
          </div>
          <div class="footer-box">
            <el-button size="small" v-if="!editConfig.noLookMore" @click="prevMore">查看更多</el-button>
            <el-button size="small" :disabled="prevBtnDisable" @click="prevClick">上一个</el-button>
            <el-button size="small" :disabled="nextBtnDisable" @click="nextClick">下一个</el-button>
          </div>
        </div>
        <div v-else style="color: #fff; margin: 50px 0px 0px 10px; font-size: 18px; height: 100%; position: relative">
          <div style="width: 100%; display: flex; align-items: center">
            <p style="width: 20%">黑名单 ></p>
            <p style="width: 80%">
              <el-checkbox-group v-model="pedestalList" style="margin-left: 30px">
                <el-checkbox
                  v-for="(item, index) in pedestalListsBlack"
                  :key="index"
                  :label="JSON.stringify({ value: item.value, title: item.title })"
                >
                  {{ item.title }}
                </el-checkbox>
              </el-checkbox-group>
            </p>
          </div>
          <div style="width: 100%; display: flex; align-items: center">
            <p style="width: 20%">白名单 ></p>
            <p style="width: 80%">
              <el-checkbox-group v-model="pedestalList" style="margin-left: 30px">
                <el-checkbox
                  v-for="(item, index) in pedestalListsWhite"
                  :key="index"
                  :label="JSON.stringify({ value: item.value, title: item.title })"
                >
                  {{ item.title }}
                </el-checkbox>
                <!-- <el-checkbox label="复选框 B"></el-checkbox> -->
              </el-checkbox-group>
            </p>
          </div>
          <div class="footer_button">
            <el-button @click="savePedestal">保存</el-button>
            <el-button @click="cancelPedestal">取消</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VideoView from "@/views/panoramicData/components/VideoView"
// import { diffTime } from "@/common/config/index.js"
import { getTagList, addToBase } from "@/api/search/search"
// import { fa } from "faker/lib/locales";
export default {
  name: "AddSalesDetailsDialog",
  mixins: [],
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: [],
          currentId: "",
          isLookImg: true,
          noLookMore:true,
        }
      }
    }
  },
  components: { VideoView },
  computed: {},
  data() {
    return {
      pedestalList: [],
      pedestalListsWhite: [],
      pedestalListsBlack: [],
      dialogWidth: "39%",
      editConfig: this.editCommonConfig,
      closeUrl: require("@/assets/img/close.png"),
      isBigImage: true,
      panoramaImgUrl: "", // require("@/assets/img/headImage1.png"),
      rightImgUrl: require("@/assets/img/headImage2.png"),
      leftImgUrl: require("@/assets/img/headImage2.png"),
      // taskName: "人脸识别",
      taskName: "",
      targetScore: 0,
      // alarmLevel: "一级",
      alarmLevel: "",
      // otherLabels: "年龄:32/种族:黄人/性别:男/颜值:20/",
      otherLabels: "",
      personInfoList: [
        // { name: "底库", value: "   底库1" },
        // { name: "姓名:", value: "张三" },
        // { name: "性别：", value: "女" },
        // { name: "身份证号：", value: "a2341324234" },
        // { name: "手机号：", value: "157****2335" },
        // { name: "重要等级：", value: "一级" }
      ],
      deviceList: [
        // { name: "设备名称:", value: "小区一单元摄像头" },
        // { name: "出现小区：", value: "小区A" },
        // { name: "所属派出所：", value: "a" }
      ],
      // tagList: ["常住人口", "尾随人员", "昼伏夜出"],
      tagList: [],
      commonHttp: "/httpImage/",
      videoPath: "",
      prevBtnDisable: false, // 上一个
      nextBtnDisable: false, // 下一个
      currentIndex: 0,
      snapTime: "",
      noComparisonImg: require("@/assets/img/headImage1.png"),
      isImgComparison: false
    }
  },
  created() {
    this.queryTagList() // 底库列表
  },
  watch: {
    "editCommonConfig.visible"(val) {
      console.log(val)
      if (val) {
        this.commonDataProcess("当前")
      }
    }
  },
  methods: {
    handleClose() {
      this.pedestalList = []
      this.isBigImage = true
      this.editConfig.visible = false
    },
    // 大图/视频 切换事件
    selTabClick(val) {
      this.isBigImage = val === 1 ? true : false
    },
    //查看更多
    prevMore() {
      this.$router.push({ path: "/statisticsQuery/portraitFilingPage/details", query: { id: this.editConfig.documentNumber } })
    },
    prevClick() {
      this.currentIndex = this.currentIndex - 1
      this.panoramaImgUrl = ""
      this.commonDataProcess("其他")
    },
    nextClick() {
      console.log(this.currentIndex)
      this.currentIndex = this.currentIndex + 1
      this.panoramaImgUrl = ""
      this.commonDataProcess("其他")
    },
    // 公共数据处理方法
    commonDataProcess(val) {
      this.editConfig.infomation.map((item, index) => {
        if (val === "当前") {
          if (item.activeObject.id === this.editConfig.currentId) {
            console.log(index)
            this.assignmentData(item, index)
          }
        } else {
          if (index === this.currentIndex) {
            this.assignmentData(item, index)
            if (
              !this.isBigImage &&
              this.editConfig.infomation[index - 1].activeObject.videoUrl.length !== 0 &&
              item.activeObject.videoUrl.length !== 0
            ) {
              this.$refs.videoView.load()
            }
          }
        }
      })
    },
    assignmentData(item, index) {
      console.log(item, "当前人员信息")
      this.editConfig.documentNumber = item.activeObject.documentNumber
      this.currentIndex = index
      this.videoPath = ""
      if (item.activeObject?.picMaxUrl.length === 1) {
        this.panoramaImgUrl = this.commonHttp + item.activeObject.picMaxUrl[0]
        if (item.activeObject.baseInfo) {
          this.rightImgUrl = this.commonHttp + item.activeObject.baseInfo[0].targetPicUrl
          // this.rightImgUrl = this.commonHttp +this.editConfig.personPicUrl
          this.leftImgUrl = this.commonHttp + item.activeObject.targetInfo[0].picSmUrl
          this.isImgComparison = true
        } else {
          this.noComparisonImg = this.commonHttp + item.activeObject.targetInfo[0].picSmUrl
          this.isImgComparison = false
        }
      }
      this.targetScore = this.checkStringEmpty(item.activeObject.compareScore)
        ? item.activeObject.baseInfo[0].compareScore
        : ''
      this.alarmLevel = item.activeObject.alarmRules[0].alarmLevel
      this.otherLabels = item.activeObject.otherLabels
      this.taskName = item.activeObject.taskName
      this.$nextTick(() => {
        this.videoPath = item.activeObject.videoUrl.length === 0 ? "" : this.commonHttp + item.activeObject.videoUrl
      })
      this.prevBtnDisable = index == 0 ? true : false
      this.nextBtnDisable = index == (this.editConfig.infomation.length-1) ? true : false
      // this.snapTime = diffTime(item.activeObject.likeDate)
      this.snapTime = item.activeObject.likeDate
      if (item.activeObject.baseInfo) {
        this.personInfoList = [
          { name: "底库", value: item.activeObject.baseInfo[0].tableName },
          { name: "姓名:", value: item.activeObject.baseInfo[0].targetName },
          { name: "性别：", value: JSON.parse(item.activeObject.baseInfo[0].labels).sex },
          { name: "身份证号：", value: JSON.parse(item.activeObject.baseInfo[0].labels).idCard },
          { name: "手机号：", value: JSON.parse(item.activeObject.baseInfo[0].labels).phone },
          { name: "重要等级：", value: item.activeObject.baseInfo[0].monitorLevel }
        ]
      }
      this.deviceList = [
        { name: "设备名称:", value: item.activeObject.cameraName ? item.activeObject.cameraName : "" },
        // { name: "居住地址:", value: item.activeObject.cameraName ? item.activeObject.cameraName : "" },
        { name: "出现小区：", value: item.activeObject.cameraAddr.split("/")[0] },
        { name: "所属派出所：", value: item.activeObject.cameraAddr.split("/")[1] }
      ]
      this.otherLabels = item.activeObject.otherLabels
      this.tagList = item.activeObject.otherLabels.split("/")

      // this.personInfoList.forEach((ite) => {
      //   if (ite.name === "性别：") {
      //     let genderStr = item.activeObject.otherLabels
      //     ite.value = this.checkStringEmpty(genderStr) ? "--" : item.activeObject.otherLabels.slice(15, 16)
      //   }
      // })
    },
    // 判断字符串/数值是否为空
    checkStringEmpty(str) {
      return typeof str === "undefined" || str == null || str === "" || str === 0
    },
    // 获取底库列表
    async queryTagList() {
      const rsp = await getTagList({})
      if (rsp && rsp.success) {
        var arr1 = new Array()
        if (rsp.data) {
          this.pedestalListsWhite = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType === "2") {
              return i
            }
          })
          this.pedestalListsBlack = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType === "1") {
              return i
            }
          })

          this.pedestalListsWhite.push(...arr1)
          console.log("是啥ddd", this.pedestalListsWhite, this.pedestalListsBlack)
        }
      } else {
        // this.$notify({
        //   title: "失败",
        //   message: "检索数据查询失败！",
        //   type: "warning"
        // });
      }
    },
    // 添加底库
    savePedestal() {
      addToBase({ captureId: this.editConfig.currentId, tableIds: [JSON.parse(this.pedestalList).value] }).then(
        (res) => {
          if (res.success) {
            this.$message.success("加入底库成功!")
            this.pedestalList = []
            this.editConfig.visible = false
          } else {
            this.$message.error(res.msg)
          }
        }
      )
    },
    cancelPedestal() {
      this.pedestalList = []
      this.editConfig.visible = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .iframe-dialog .el-dialog__body {
    // .preview-image {
    // background: #ec6e6e;
    width: 760px;
    height: 734px;
    // position: relative;
    // z-index: 3;
    .dialog-header {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333;
      height: 65px;
      background: #0a1a34;
    }
    .content {
      width: 760px;
      height: 734px;
      background-image: url("/public/panoramicData/pic_alert_bg.png");
      background-position-x: center;
      background-repeat: no-repeat;
      background-size: contain;
      box-sizing: border-box;
      padding: 0 20px;
      position: relative;
      .header-box {
        height: 65px;
        border-bottom: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        // padding-top: 30px;
        .label-box {
          display: flex;
          color: #fff;
          font-size: 28px;
          .common-title {
            margin: 0 20px;
            cursor: pointer;
          }
        }
        .close-box {
          width: 15px;
          height: 22px;
          margin-right: 20px;
          .el-image {
            cursor: pointer;
          }
        }
      }
      .header-box1 {
        height: 65px;
        border-bottom: 1px solid #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding-top: 10px;
        .label-box {
          display: flex;
          color: #fff;
          font-size: 28px;
          .common-title {
            margin: 0 20px;
            cursor: pointer;
          }
        }
        .close-box {
          width: 15px;
          height: 22px;
          margin-right: 20px;
          .el-image {
            cursor: pointer;
          }
        }
      }
      .bigImage-box {
        color: #fff;
        .top-view {
          display: flex;
          .snap-left-box {
            .label-common {
              color: rgba(255, 255, 255, 0.8);
              font-size: 18px;
              margin: 15px 15px;
            }
            .img-box {
              width: 409px;
              height: 255px;
              .el-image,
              .s-l-img {
                width: 100%;
                height: 100%;
              }
            }
            .value-common {
              font-weight: 700;
              margin-top: 28px;
              margin-left: 7px;
              font-size: 16px;
            }
            .device-info {
              margin-left: 7px;
              margin-top: 10px;
              font-size: 16px;
              width: 409px;
            }
          }
          .snap-right-box {
            width: 100%;
            margin-left: 20px;
            .label-common {
              color: rgba(255, 255, 255, 0.8);
              font-size: 18px;
              margin: 15px 0px;
              height: 17px;
              display: flex;
              justify-content: space-between;
            }
            .snap-image-box {
              display: flex;
              position: relative;
              margin-bottom: 30px;
              .img-right,
              .img-left {
                width: 133px;
                height: 139px;
              }
              .img-right {
                margin-left: 20px;
              }
              .radio-view {
                position: absolute;
                left: calc(50% - 50px);
                bottom: -10px;
                width: 100px;
                height: 38px;
                line-height: 40px;
                border-radius: 6px;
                background: #008000;
                font-size: 22px;
                text-align: center;
              }
            }
            .person-info {
              margin-top: 10px;
              font-size: 16px;
            }
          }
        }
        .bottom-view {
          margin-left: 7px;
          .other-box {
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
          }
          .tag-box {
            margin-top: 20px;
            display: flex;
            .tag-info {
              width: 88px;
              height: 32px;
              line-height: 32px;
              text-align: center;
              border-radius: 3px;
              opacity: 1;
              background: #3d6da1;
              box-sizing: border-box;
              border: 1px solid #ffffff;
              margin-left: 10px;
              &:first-child {
                margin-left: 0px;
              }
            }
          }
        }
      }
      .video-box {
        display: flex;
        .left-video {
          margin-top: 20px;
          width: 70%;
          height: 400px;
          .no-video {
            width: 100%;
            height: 260px;
            line-height: 260px;
            text-align: center;
            background: #0a1a34;
            border: 2px solid #3d6da1;
            border-radius: 5px;
            color: #e5e5e5;
            font-size: 22px;
          }
        }
        .right-video {
          width: 30%;
          margin-left: 20px;
          .label-common {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin: 15px 0px;
          }
        }
      }
      .footer-box {
        position: absolute;
        right: 45px;
        bottom: 35px;
        height: 32px;
        text-align: right;
        .el-button {
          color: #fff;
          background-color: transparent;
        }
      }
    }
    // }
    .commonColor {
      color: #fff;
    }
    .selColor {
      color: #767676;
    }
  }
}
</style>
<style lang="scss">
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
</style>
